LÀr dig hur du utnyttjar Next.js API Routes för att bygga serverlösa backends direkt i din Next.js-applikation. Denna guide tÀcker allt frÄn grundlÀggande installation till avancerade tekniker för att hantera autentisering, datalagring och mer.
Next.js API Routes: Bygg din backend med lÀtthet
Next.js har revolutionerat frontend-utveckling med sina kraftfulla funktioner och intuitiva struktur. Men visste du att det ocksÄ kan förenkla backend-utveckling avsevÀrt? Med Next.js API Routes kan du skapa serverlösa API-slutpunkter direkt i din Next.js-applikation, vilket i mÄnga fall eliminerar behovet av en separat backend-server. Denna omfattande guide gÄr igenom processen för att bygga en robust och skalbar backend med hjÀlp av Next.js API Routes.
Vad Àr Next.js API Routes?
API Routes Àr serverlösa funktioner som du skapar i din /pages/api-katalog i ditt Next.js-projekt. Dessa funktioner hanterar inkommande HTTP-förfrÄgningar och returnerar svar, precis som ett traditionellt backend-API. Den stora skillnaden Àr att de driftsÀtts som serverlösa funktioner, vilket innebÀr att du inte behöver hantera servrar eller infrastruktur.
TÀnk pÄ dem som lÀtta, on-demand backend-funktioner som Àr sömlöst integrerade med din Next.js-frontend.
Fördelar med att anvÀnda Next.js API Routes
- Förenklad utveckling: Skriv bÄde din frontend- och backend-kod i samma projekt, med JavaScript eller TypeScript. Inget mer kontextbyte mellan olika projekt och teknologier.
- Serverlös arkitektur: Dra nytta av skalbarheten, tillförlitligheten och kostnadseffektiviteten hos serverlös databehandling. Betala bara för de resurser du förbrukar.
- Enkel driftsÀttning: DriftsÀtt hela din applikation (frontend och backend) med ett enda kommando med plattformar som Vercel eller Netlify.
- Inbyggd sÀkerhet: Next.js och serverlösa plattformar erbjuder inbyggda sÀkerhetsfunktioner för att skydda dina API-slutpunkter.
- FörbÀttrad prestanda: API Routes kan driftsÀttas nÀrmare dina anvÀndare, vilket minskar latens och förbÀttrar prestandan, sÀrskilt fördelaktigt för anvÀndare globalt.
- à teranvÀndbarhet av kod: Dela kod mellan din frontend och backend, vilket minskar kodduplicering och förbÀttrar underhÄllbarheten.
Komma igÄng med Next.js API Routes
LÄt oss skapa en enkel API-route som returnerar ett JSON-svar. Se först till att du har ett Next.js-projekt uppsatt. Om inte, skapa ett med:
npx create-next-app my-app
cd my-app
Skapa nu en fil med namnet hello.js i katalogen /pages/api:
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' })
}
Denna kod definierar en enkel API-route som svarar med ett JSON-objekt som innehÄller namnet "John Doe". För att komma Ät denna API-route, starta din Next.js-utvecklingsserver:
npm run dev
Ăppna sedan din webblĂ€sare och navigera till http://localhost:3000/api/hello. Du bör se följande JSON-svar:
{"name": "John Doe"}
FörstÄ API Route Handler
handler-funktionen i din API-route tar emot tvÄ argument:
req: En instans avhttp.IncomingMessage, som innehÄller information om den inkommande förfrÄgan, sÄsom anropsmetod, headers och body.res: En instans avhttp.ServerResponse, som lÄter dig skicka ett svar tillbaka till klienten.
Du kan anvÀnda dessa objekt för att hantera olika typer av förfrÄgningar, lÀsa data frÄn förfrÄganskroppen, stÀlla in svars-headers och skicka olika typer av svar.
Hantera olika HTTP-metoder
Du kan anvÀnda egenskapen req.method för att avgöra HTTP-metoden för den inkommande förfrÄgan och hantera olika metoder dÀrefter. Till exempel:
// pages/api/method.js
export default function handler(req, res) {
if (req.method === 'GET') {
// Hantera GET-förfrÄgan
res.status(200).json({ message: 'Detta Àr en GET-förfrÄgan' })
} else if (req.method === 'POST') {
// Hantera POST-förfrÄgan
res.status(200).json({ message: 'Detta Àr en POST-förfrÄgan' })
} else {
// Hantera andra metoder
res.status(405).json({ message: 'Metoden Àr inte tillÄten' })
}
}
I detta exempel hanterar API-routen bÄde GET- och POST-förfrÄgningar. Om anropsmetoden Àr GET svarar den med ett JSON-objekt som innehÄller meddelandet "Detta Àr en GET-förfrÄgan". Om anropsmetoden Àr POST svarar den med ett JSON-objekt som innehÄller meddelandet "Detta Àr en POST-förfrÄgan". Om anropsmetoden Àr nÄgot annat svarar den med ett 405 Method Not Allowed-fel.
LÀsa data frÄn förfrÄganskroppen
För POST-, PUT- och PATCH-förfrÄgningar behöver du ofta lÀsa data frÄn förfrÄganskroppen. Next.js har inbyggt stöd för att tolka JSON- och URL-kodade förfrÄganskroppar. För att tolka en JSON-förfrÄganskropp kan du anvÀnda egenskapen req.body. Till exempel:
// pages/api/post.js
export default async function handler(req, res) {
if (req.method === 'POST') {
const { name, email } = req.body
// Bearbeta datan
console.log('Namn:', name)
console.log('E-post:', email)
res.status(200).json({ message: 'Data mottogs framgÄngsrikt' })
} else {
res.status(405).json({ message: 'Metoden Àr inte tillÄten' })
}
}
För att testa denna API-route kan du anvÀnda ett verktyg som Postman eller curl för att skicka en POST-förfrÄgan med en JSON-kropp:
curl -X POST -H "Content-Type: application/json" -d '{"name": "Jane Doe", "email": "jane.doe@example.com"}' http://localhost:3000/api/post
StÀlla in svars-headers
Du kan anvÀnda metoden res.setHeader() för att stÀlla in svars-headers. Detta Àr anvÀndbart för att stÀlla in innehÄllstyp, cache-kontroll och annan viktig information. Till exempel:
// pages/api/headers.js
export default function handler(req, res) {
res.setHeader('Content-Type', 'application/json')
res.setHeader('Cache-Control', 's-maxage=3600')
res.status(200).json({ message: 'Hej, vÀrlden!' })
}
I detta exempel stÀller API-routen in Content-Type-headern till application/json, vilket indikerar att svaret Àr ett JSON-objekt. Den stÀller ocksÄ in Cache-Control-headern till s-maxage=3600, vilket talar om för webblÀsaren och CDN att cachelagra svaret i upp till 1 timme.
Felhantering
Det Àr viktigt att hantera fel pÄ ett elegant sÀtt i dina API-routes. Du kan anvÀnda try-catch-block för att fÄnga undantag och skicka lÀmpliga felsvar till klienten. Till exempel:
// pages/api/error.js
export default async function handler(req, res) {
try {
// Simulera ett fel
throw new Error('NÄgot gick fel')
} catch (error) {
console.error(error)
res.status(500).json({ message: 'Internt serverfel' })
}
}
I detta exempel simulerar API-routen ett fel genom att kasta ett nytt Error-objekt. Catch-blocket fĂ„ngar felet, loggar det till konsolen och skickar ett 500 Internal Server Error-svar till klienten. ĂvervĂ€g att anvĂ€nda ett robust loggningssystem som Sentry eller Datadog för produktionsmiljöer.
Ansluta till en databas
Ett av de vanligaste anvÀndningsfallen för API-routes Àr att ansluta till en databas. Next.js API Routes integreras sömlöst med olika databaser, inklusive:
- MongoDB: En populÀr NoSQL-databas som Àr vÀl lÀmpad för flexibel och ostrukturerad data.
- PostgreSQL: En kraftfull och öppen kÀllkods-relationsdatabas som Àr kÀnd för sin tillförlitlighet och dataintegritet.
- MySQL: En annan populÀr öppen kÀllkods-relationsdatabas som anvÀnds flitigt för webbapplikationer.
- Firebase: En molnbaserad plattform som tillhandahÄller en realtidsdatabas och andra tjÀnster.
- FaunaDB: En serverlös databas som Àr utformad för globala applikationer.
HÀr Àr ett exempel pÄ hur man ansluter till en MongoDB-databas i en Next.js API-route:
// pages/api/mongodb.js
import { MongoClient } from 'mongodb'
const uri = process.env.MONGODB_URI
const options = {}
let client
let clientPromise
if (!process.env.MONGODB_URI) {
throw new Error('VÀnligen lÀgg till din Mongo URI i .env.local')
}
if (process.env.NODE_ENV === 'development') {
// I utvecklingslÀge, anvÀnd en global variabel sÄ att vÀrdet
// bevaras över modul-omladdningar orsakade av HMR (Hot Module Replacement).
if (!global._mongoClientPromise) {
client = new MongoClient(uri, options)
global._mongoClientPromise = client.connect()
}
clientPromise = global._mongoClientPromise
} else {
// I produktionslÀge Àr det bÀst att inte anvÀnda en global variabel.
client = new MongoClient(uri, options)
clientPromise = client.connect()
}
// Exportera ett modul-scopat MongoClient-löfte. Genom att göra detta i en
// separat modul kan klienten sÀkert ÄteranvÀndas över flera
// funktioner. Se: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb/lib/mongodb.js
export default async function handler(req, res) {
try {
const client = await clientPromise
const db = client.db(process.env.MONGODB_DB)
const collection = db.collection('users')
const users = await collection.find({}).toArray()
res.status(200).json({ users })
} catch (e) {
console.error(e)
res.status(500).json({ message: 'Misslyckades med att hÀmta anvÀndare' })
}
}
Innan du kör denna kod, se till att du har mongodb-paketet installerat:
npm install mongodb
Du behöver ocksÄ stÀlla in miljövariablerna MONGODB_URI och MONGODB_DB. Dessa variabler bör definieras i din .env.local-fil (eller din vÀrdleverantörs instÀllningar för miljövariabler för produktion). MONGODB_URI innehÄller anslutningsstrÀngen till din MongoDB-databas, och MONGODB_DB specificerar databasnamnet.
Autentisering och auktorisering
Att skydda dina API-routes Àr avgörande för sÀkerheten. Next.js API Routes kan sÀkras med olika autentiserings- och auktoriseringstekniker, inklusive:
- JSON Web Tokens (JWT): En standard för att sÀkert överföra information mellan parter som ett JSON-objekt.
- API-nycklar: Ett enkelt sÀtt att begrÀnsa Ätkomsten till dina API-slutpunkter.
- OAuth: Ett delegeringsprotokoll som lÄter anvÀndare ge tredjepartsapplikationer Ätkomst till sina resurser utan att dela sina inloggningsuppgifter.
- NextAuth.js: En komplett öppen kÀllkods-autentiseringslösning för Next.js-applikationer.
HÀr Àr ett exempel pÄ hur man skyddar en API-route med JWT-autentisering:
// pages/api/protected.js
import jwt from 'jsonwebtoken'
const secret = process.env.JWT_SECRET
export default function handler(req, res) {
const token = req.headers.authorization?.split(' ')[1]
if (!token) {
return res.status(401).json({ message: 'Obehörig' })
}
try {
const decoded = jwt.verify(token, secret)
// "decoded"-objektet innehÄller anvÀndarinformationen som Àr inbÀddad i token
// Till exempel: const userId = decoded.userId;
// FortsÀtt bearbeta förfrÄgan
res.status(200).json({ message: 'Skyddad resurs har nÄtts framgÄngsrikt' })
} catch (error) {
return res.status(401).json({ message: 'Ogiltig token' })
}
}
Innan du kör denna kod, se till att du har jsonwebtoken-paketet installerat:
npm install jsonwebtoken
Du behöver ocksÄ stÀlla in miljövariabeln JWT_SECRET. Detta bör vara en stark, slumpmÀssigt genererad hemlig nyckel som anvÀnds för att signera och verifiera JWTs. Förvara denna sÀkert och exponera den aldrig i din klient-sidokod.
Middleware
Ăven om Next.js inte erbjuder traditionell middleware för API-routes pĂ„ samma sĂ€tt som Express.js, kan du uppnĂ„ liknande funktionalitet genom att slĂ„ in dina API-route handlers med Ă„teranvĂ€ndbara funktioner. Detta gör att du kan utföra uppgifter som:
- Autentisering: Verifiera anvÀndaruppgifter innan du tillÄter Ätkomst till API-slutpunkter.
- Auktorisering: Kontrollera om en anvÀndare har de nödvÀndiga behörigheterna för att utföra en specifik ÄtgÀrd.
- Loggning: Logga inkommande förfrÄgningar och utgÄende svar för granskning och felsökning.
- Validering: Validera förfrÄgningsdata för att sÀkerstÀlla att den uppfyller specifika kriterier.
- Rate Limiting: Skydda ditt API frÄn missbruk genom att begrÀnsa antalet förfrÄgningar som en anvÀndare kan göra inom en given tidsperiod.
HÀr Àr ett exempel pÄ hur man skapar en enkel loggnings-middleware:
// utils/middleware.js
export function withLogging(handler) {
return async function(req, res) {
console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`)
return handler(req, res)
}
}
För att anvÀnda denna middleware, slÄ helt enkelt in din API-route handler med withLogging-funktionen:
// pages/api/logged.js
import { withLogging } from '../../utils/middleware'
async function handler(req, res) {
res.status(200).json({ message: 'Denna förfrÄgan loggades' })
}
export default withLogging(handler)
BÀsta praxis för att bygga Next.js API Routes
- HÄll dina API-routes smÄ och fokuserade. Varje API-route bör hantera en specifik uppgift eller resurs.
- AnvÀnd miljövariabler för kÀnslig data. HÄrdkoda aldrig hemligheter eller API-nycklar i din kod.
- Validera förfrÄgningsdata för att förhindra sÀkerhetssÄrbarheter. AnvÀnd ett bibliotek som Joi eller Yup för att validera förfrÄgningskroppar.
- Hantera fel elegant och ge informativa felmeddelanden. AnvÀnd try-catch-block och logga fel till en central plats.
- AnvÀnd cachelagring för att förbÀttra prestandan. Cachelagra data som anvÀnds ofta för att minska databasbelastningen.
- Ăvervaka dina API-routes för prestanda och fel. AnvĂ€nd ett övervakningsverktyg som Sentry eller Datadog för att spĂ„ra hĂ€lsan hos ditt API.
- Dokumentera dina API-routes med ett verktyg som Swagger eller OpenAPI. Detta gör det lÀttare för andra utvecklare att anvÀnda ditt API.
- ĂvervĂ€g att anvĂ€nda TypeScript för typsĂ€kerhet. TypeScript kan hjĂ€lpa dig att fĂ„nga fel tidigt och förbĂ€ttra underhĂ„llbarheten av din kod.
- TÀnk pÄ internationalisering (i18n) frÄn början. Om din applikation kommer att anvÀndas av anvÀndare frÄn olika lÀnder, designa dina API-routes för att stödja flera sprÄk och valutor. Till exempel kan API-slutpunkter för e-handel behöva hantera olika skattesatser och fraktkostnader baserat pÄ anvÀndarens plats.
- Implementera korrekt CORS (Cross-Origin Resource Sharing)-konfiguration. Detta Àr avgörande nÀr ditt API nÄs frÄn en annan domÀn Àn din Next.js-applikation. Konfigurera CORS noggrant för att endast tillÄta auktoriserade ursprung att komma Ät dina API-resurser.
Avancerade tekniker
Bakgrundsjobb
För lÄngvariga uppgifter som inte bör blockera API-svaret, övervÀg att anvÀnda bakgrundsjobb. Du kan anvÀnda bibliotek som BullMQ eller Bree för att hantera dina bakgrundsjobb och bearbeta dem asynkront.
WebSockets
För realtidsapplikationer kan du anvÀnda WebSockets i dina Next.js API-routes. Bibliotek som Socket.IO och ws gör det enkelt att etablera bestÀndiga anslutningar mellan klienten och servern.
GraphQL
Om du behöver ett mer flexibelt och effektivt sÀtt att hÀmta data, övervÀg att anvÀnda GraphQL. Du kan anvÀnda bibliotek som Apollo Server eller Yoga för att skapa en GraphQL API-slutpunkt i din Next.js-applikation.
Slutsats
Next.js API Routes erbjuder ett kraftfullt och bekvÀmt sÀtt att bygga serverlösa backends direkt i din Next.js-applikation. Genom att utnyttja fördelarna med serverlös arkitektur kan du förenkla utvecklingen, förbÀttra prestandan och minska kostnaderna. Oavsett om du bygger ett enkelt kontaktformulÀr eller en komplex e-handelsplattform kan Next.js API Routes hjÀlpa dig att skapa en robust och skalbar backend med lÀtthet. Med en solid förstÄelse för grunderna och tillÀmpningen av bÀsta praxis kan du utnyttja detta kraftfulla verktyg för att skapa effektiva, sÀkra och globalt tillgÀngliga applikationer.